<template>
  <div class="center-wrap">
    <div class="center-bg">
    </div>
    <div class="slider-bar">
      <el-slider
        v-model="sliderValue"
        :show-tooltip="false"
        :max="ballList.length-1"
      ></el-slider>
    </div>

    <div class="round-wrap">
      <div class="round-ball-wrap"
        v-for="(v, index) in ballList"
        :key="index"
        ref="round_ball_wrap"
      >

        <div class="round-inner" @click.stop="ballClick(index,$event,v)">
          <el-popover
                  placement="bottom"
                  width="160"
                  trigger="hover"
          >
            <div style="margin: 0">
              {{v.name}}
              <p>这是一段内容这是一段内容？</p>
            </div>
            <div class="round-content" slot="reference" @click.stop="ballClick(index,$event,v)">
              {{v.name}}
            </div>
          </el-popover>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
    import _ from 'lodash'
    export default {
        components: {},
        data () {
            return {
              sliderValue: 0,
              currentCenterBall: null,
              ballList: [
                  {
                      name: 'xx区1'
                  },
                  {
                      name: 'xx区2'
                  },
                  {
                      name: 'xx区3'
                  },
                  {
                      name: 'xx区4'
                  },
                  {
                      name: 'xx区5'
                  },
                  {
                      name: 'xx区6'
                  },
                  {
                      name: 'xx区7'
                  },
                  {
                      name: 'xx区8'
                  },
                  {
                      name: 'xx区9'
                  },
                  {
                      name: 'xx区10'
                  },
              ]
            }
        },
        methods: {
            ballClick (v, dom) {
              // this.currentCenterBall = dom
              // let allBall = document.querySelectorAll('.round-inner')
              // let t = _.findIndex(allBall, this.currentCenterBall)
              // allBall.forEach((v, i)=>{
              //     if(i!==t && i!==t-1 && i!==t+1){
              //       console.log(v.style.transform)
              //       // v.style.transform+=' scale(0.5)'
              //     }
              // })
              let rt = document.querySelector(":root")
              rt.style.setProperty("--rotateTimes",v);
            },
            PositionBall() { //球初始化定位
              let ballList= this.$refs.round_ball_wrap
              let animationDelay= 0
              let rotateKey1= 0
              let rotateKey2= 37  // 值51(7个的时候刚好合适) 项目越多,数字越小 需要跟rotateKey1保持一致
              ballList.forEach((ballWrap)=>{
                ballWrap.style.animationDelay= `${animationDelay}s`
                let roundInner = ballWrap.querySelector('.round-inner')
                roundInner.style.transform =
                    `rotate(calc(-${rotateKey1}deg + var(--rotateTimes) * ${rotateKey2}deg))
                      translateY(350px)
                      rotate(calc(${rotateKey1}deg - var(--rotateTimes) * ${rotateKey2}deg))
                      rotateX(-75deg)`
                animationDelay+= 0.1
                rotateKey1+= 37  // 步进值51(7个的时候刚好合适)
              })
            }
        },
        mounted() {
          this.PositionBall()
        },
        watch:{
            sliderValue(val){
                let allBall = document.querySelectorAll('.round-inner')
                this.ballClick(val, allBall[val])
            }
        }
    }
</script>
<style lang="stylus">
  :root {
    --rotateTimes: 0;
  }
  .center-wrap{
    height: 100%;
    position: relative;
    pointer-events: auto;
    &::before{
      content: '';
      display: block;
      position: absolute;
      left: 39%;
      top: 8%;
      width: 105px;
      height: 117px;
      background-image: url("../../assets/img/HuaiNanImg/badge.png");
      z-index: 9;
    }
    .round-wrap, .round-ball-wrap, .round-inner{
      transform-style: preserve-3d;
    }
    .round-ball-wrap{ //外面的球
      width: 165px;
      height: 184px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .round-inner{ //里面的球
      width: 100%;
      height: 100%;
      background-image: url("../../assets/img/HuaiNanImg/round_ball_unchecked.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      transition: transform 0.4s linear,  box-shadow 0.15s linear,  margin 0.1s linear,  width 0.1s linear,  height 0.1s linear;
      .round-content{
        width: 100%;
        height: 100%;
      }
    }
    .round-wrap { //整体的包裹层
      position: absolute;
      height: 80%;
      width: 100%;
      top: 0;
      left: 0;
      z-index: 2;
      transform: rotateX(75deg);
    }
    .center-bg{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-55%, -30%);
      width: 100%;
      height: 100%;
      background-image: url("../../assets/img/HuaiNanImg/center_bg.png")
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
</style>
